@import '~scss/variables';

.main {
  padding: 12px;
  border-radius: 4px;
  background-color: $card-bg-color;

  & > .item + .item {
    margin-top: 8px;
  }
}

.item {
  padding: 12px;
  border: 1px solid $light-color03;
  border-radius: 4px;
  background-color: $white;

  :global {
    .icon {
      margin-right: 10px;
    }
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
    margin-bottom: 10px;

    p {
      display: flex;
      align-items: center;
      color: #5f708a;

      span {
        display: flex;
        align-items: center;
        margin-left: 10px;

        .status {
          width: 16px;
          height: 15px;
          margin-right: 10px;
          background-image: url('/assets/health-error.svg');

          &.health {
            background-image: url('/assets/health.svg');
          }
        }
      }
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-radius: 22px;
    border: 1px solid #ccd3db;
    background-color: $bg-color;

    .right {
      display: flex;
      justify-content: flex-end;
      width: 60%;

      .desc {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding-right: 30px;

        span {
          margin: 0 5px;
        }
      }

      .level {
        display: flex;
        flex: 1 0 100px;
        align-items: center;
      }
    }
  }
}
